<template>
	<view class="attestationBgc">
		<image src="../../static/img/chart.png" mode="" class="bgc"></image>
		<view class="immortalAttestation" @click="withdrawTK">
			真人认证
		</view>
		<view class="authenticationFont">
			认证特权
		</view>
		<view class="priorityList me-fx-row-sb-c">
			<view class="priorityBox me-fx-row-start-c">
				<image src="../../static/img/a-1.png" mode=""></image>
				<view class="priorityFont">
					免费发广告
				</view>
			</view>
			<view class="priorityBox me-fx-row-start-c">
				<image src="../../static/img/a-2.png" mode=""></image>
				<view class="priorityFont">
					评论广播
				</view>
			</view>
			<view class="priorityBox me-fx-row-start-c">
				<image src="../../static/img/a-3.png" mode=""></image>
				<view class="priorityFont">
					报名广播
				</view>
			</view>
			<view class="priorityBox me-fx-row-start-c">
				<image src="../../static/img/a-3.png" mode=""></image>
				<view class="priorityFont">
					发起私聊
				</view>
			</view>
			<view class="priorityBox me-fx-row-start-c">
				<image src="../../static/img/a-3.png" mode=""></image>
				<view class="priorityFont">
					红包照片
				</view>
			</view>
			<view class="priorityBox me-fx-row-start-c">
				<image src="../../static/img/a-3.png" mode=""></image>
				<view class="priorityFont">
					收费相册
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<!-- <view class="Covering" v-if="withdrawTK">
			<view class="withdrawTK">
				<image src="../../static/img/bg-g.png" mode=""></image>
				<view class="information">
					人脸识别需先填写真实身份证
				</view>
				<input type="text" value="" class="inputValue" placeholder="请输入真实名字" v-model="inputValueName" />
				<input type="text" value="" class="inputValue" placeholder="请输入身份证号" v-model="inputValueaCcount" />
				<view class="btnBox me-fx-row-sb-c">
					<view class="cancelBtn" @click="withdrawTK=false">
						取消
					</view>
					<view class="sureBtn" @click="sureBtn">
						确定
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// withdrawTK: false,
				inputValueName: '',
				inputValueaCcount: ''
			}
		},
		methods: {
			withdrawTK(){
				uni.navigateTo({
					url:'./authenticationCard'
				})
			},
			sureBtn() {
				if (this.inputValueName == '') {
					uni.showToast({
						title: '请输入真实名字',
						duration: 1000,
						icon: 'none'
					});
					return
				} else if (this.inputValueaCcount == '') {
					uni.showToast({
						title: '请输入身份证号',
						duration: 1000,
						icon: 'none'
					});
					return
				} else {

				}
			}
		}
	}
</script>

<style>
	.attestationBgc .bgc {
		width: 546rpx;
		height: 338rpx;
		margin: 36rpx auto 0;
		display: block;
	}

	.immortalAttestation {
		width: 500rpx;
		height: 98rpx;
		background: #587119;
		box-shadow: 0rpx 4rpx 5rpx 0rpx rgba(88, 25, 113, 0.35);
		border-radius: 49rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		line-height: 98rpx;
		text-align: center;
		margin: 73rpx auto 0;
	}

	.authenticationFont {
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
		position: relative;
		text-align: center;
		margin-top: 143rpx;


	}

	.authenticationFont::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 20rpx;
		width: 280rpx;
		height: 1rpx;
		background-color: rgba(228, 228, 228, 1);
		transform: translateY(-50%);
	}

	.authenticationFont::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 20rpx;
		width: 280rpx;
		height: 1rpx;
		background-color: rgba(228, 228, 228, 1);
		transform: translateY(-50%);
	}

	.priorityList {
		flex-wrap: wrap;
		margin-top: 60rpx;
	}

	.priorityBox {
		width: 46%;
		margin-top: 34rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 4rpx 2rpx 10rpx 0rpx rgba(249, 237, 246, 1);
		border-radius: 43rpx 43rpx 43rpx 43rpx;
	}

	.priorityBox image {
		width: 86rpx;
		height: 86rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.priorityFont {
		text-align: left;
		line-height: 98rpx;
		font-size: 32rpx;
		color: rgba(102, 102, 102, 1);
	}

	.priorityList {
		padding: 0 36rpx;
		box-sizing: border-box;
	}

	.inputValue {
		height: 38rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(205, 205, 205, 1);
		border-radius: 10rpx;
		font-size: 30rpx;
		color: rgba(85, 85, 85, 1);
		line-height: 98rpx;
		margin: auto;
		margin: 26rpx 48rpx;
		padding: 30rpx;
	}

	.btnBox {
		padding: 48rpx;
		box-sizing: border-box;

	}

	.btnBox .cancelBtn,
	.btnBox .sureBtn {
		width: 228rpx;
		height: 80rpx;
		border: 1rpx solid #93B715;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.cancelBtn {
		background: rgba(255, 255, 255, 1);
		color: #93B715;
	}

	.sureBtn {
		background-color: #93B715;
		color: white;
	}

	.information {
		font-size: 30rpx;
		color: rgba(51, 51, 51, 1);
		margin: 26rpx 0;
		padding: 0 49rpx;
	}
</style>
